<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <title>CloudBudget</title>
</head>

<body>

  <header>
    <div class="container">

      <nav>
        <a href="#"><img src="img/logo.svg" class="nav__logo" alt=""></a>

        <ul class="nav__references">
          <li><a href="#">Обзор</a></li>
          <li><a href="#">Возможности</a></li>
          <li><a href="#">Технология</a></li>
          <li><a href="#">Контакты</a></li>
          <li><a href="#">Войти</a></li>
        </ul>
      </nav>

      <div class="header">
        <h1>Cloudbudget</h1>
        <p>Управление бюджетом в для всех.<br>
          Всего 69,95 € в месяц после 7-дневной<br>
          пробной версии за 4,99 €</p>
        <button>Попробовать</button>
      </div>

    </div>
  </header>



  <main>

    <section class="offer">
      <div class="container">

        <div class="offer__text">
          <h2>Простое приложение для <br>управления бюджетом</h2>

          <p>Наше приложение создано, чтобы вы могли в реальном времени управлять своим бюджетом и расходами в режиме онлайн с любого устройства. Оно предоставляет подробные отчеты о доходах и расходах с графиками, чтобы вы сразу могли увидеть
            расходы и бюджет. Читайте ниже, чтобы узнать больше.</p>

          <a href="#">Узнать подробнее</a>
        </div>

        <img src="img/offer.png" alt="">

      </div>
    </section>



    <section class="opportunities">

      <h2>Возможности</h2>

      <div class="container">

        <div class="opportunities__item">
          <div class="opportunities__text">

            <h3>Поддерживает все <br> валюты и карты</h3>
            <p>Мы поддерживаем все популярные <br> валюты и полностью настраиваем, <br> чтобы добавить</p>
            <a href="#">Подробнее</a>
          </div>
        </div>

        <div class="opportunities__item">
          <div class="opportunities__text">
            <h3>Управляйте своими <br> расходами на ходу</h3>
            <p>Вы можете получить доступ к своей <br> учетной записи из любой точки мира на <br> любом устройстве</p>
            <a href="#">Подробнее</a>
          </div>
        </div>

        <div class="opportunities__item">
          <div class="opportunities__text">
            <h3>Управление бюджетом <br> осуществляется в облаке</h3>
            <p>Наше приложение создано для того, <br> чтобы вы могли управлять <br> управлять своим бюджетом. </p>
            <a href="#">Подробнее</a>
          </div>
        </div>

      </div>
    </section>



    <section class="technology">

      <h2>Технологии</h2>

      <div class="container">

        <div class="technology__item">
          <div class="technology__content">
            <img src="img/technology/cloud.svg" alt="">
            <h3>Облачное хранение</h3>
            <p>Доступ из любой точки мира с любого устройства</p>
          </div>
        </div>

        <div class="technology__item">
          <div class="technology__content">
            <img src="img/technology/guard.svg" alt="">
            <h3>Безопасность</h3>
            <p>Вся информация хранится на защищенных облачных серверах</p>
          </div>
        </div>

        <div class="technology__item">
          <div class="technology__content">
            <img src="img/technology/pdf.svg" alt="">
            <h3>PDF Отчеты</h3>
            <p>Скачивайте ваши отчеты в удобном формате PDF</p>
          </div>
        </div>

        <div class="technology__item">
          <div class="technology__content">
            <img src="img/technology/csv.svg" alt="">
            <h3>CSV Отчеты</h3>
            <p>Скачивайте ваши отчеты в удобном формате CSV</p>
          </div>
        </div>

      </div>
    </section>



    <section class="saving">
      <div class="container">

        <div class="saving__item">
          <h2>Сосредоточьтесь на <br> экономии денег</h2>

          <p>Мы помогаем вам отслеживать ваши привычки в расходах, чтобы <br> вы могли легко определить и сократить ненужные расходы. <br> Просто присоединяйтесь сегодня, чтобы начать!</p>

          <div class="markets">
            <a href="#"><img src="img/markets/playstore.svg" alt=""></a>
            <a href="#"><img src="img/markets/appstore.svg" alt=""></a>
          </div>
        </div>

        <img src="img/saving.png" alt="">

      </div>
    </section>



    <section class="call">
      <div class="container">

        <div class="call__text">
          <h2>Напишите нам</h2>

          <p>Остались вопросы или опасения? Просто заполните форму ниже, <br>и наша служба поддержки свяжется с вами в течение 24 часов.</p>
        </div>

        <form class="call__form">
          <input type="text" name="" placeholder="Имя">
          <input type="text" name="" placeholder="Телефон">
          <button type="submit" name="button">Отправить</button>
        </form>

      </div>
    </section>

  </main>



  <footer>
    <div class="container">

      <h3>Адрес</h3>

      <p>Pipang Ltd, Griva Digeni,
        81-83 Jacovides Tower, 1st Floor
        1090 Picosia USA</p>

      <p>Copyright 2021 CloudBudget</p>

    </div>
  </footer>

</body>

</html>
